<template>
<!-- 我的作品 -->
  <div class="home">
    <menuBar></menuBar>
    <div class="myProduction">
        <headPortrait class="headPortrait"></headPortrait>
        <div class="page">
            <div class="typeArr">
                <div @click="changeType(index)" :class="state.activeIndex == index? 'typeItem active' : 'typeItem'" v-for="(item,index) in state.typeArr" :key="index">
                  {{item.title}}
                </div>
            </div>
            <div class="content">
                <div class="title">
                  {{state.typeArr[state.activeIndex].title}}
                </div>
                <div class="descData">
                    <div class="count">
                        <div class="text">{{state.typeArr[state.activeIndex].title}}数量</div>
                        <span>{{state.typeArr[state.activeIndex].num}}</span>
                    </div>
                    <div  class="icon">
                        <img src="@/assets/img/writer/item5.png" >
                    </div>
                    <div class="echart">
                        <div id="customerChart" style="width: 130px; height: 130px;"></div>
                    </div>
                    <div class="legend">
                        <div class="item">
                            <div class="label">
                              已提交
                            </div>
                            <div class="value">88</div>
                        </div>
                        <div class="item">
                            <div class="label">
                              已提交
                            </div>
                            <div class="value">500</div>
                        </div>
                    </div>
                </div>

                <div class="tableType">
									<div @click="changeTableType(index)" :class="state.activeTableType == index ? 'tableTitle active' : 'tableTitle'" v-for="(item,index) in state.tableType" :key="index">
									{{item.label}}
									</div>
                </div>
                <div class="contentItem" v-if="state.activeIndex==0">
                      <el-table :data="state.tableArr"  align="center" :header-cell-style="{background: '#F0F0F0',color: '#5C5F66',}"    >
                          <el-table-column prop="" label="封面图"   width="">
                              <template #default="scope">
                                  <img style="width: 48px;height: 48px;" :src="scope.row.imgs" >
                              </template>
                          </el-table-column>
                          <el-table-column prop="title" :label="state.typeArr[state.activeIndex].title+'标题'"  width="">
                          </el-table-column>
                          <el-table-column prop="ctime" sortable label="发布时间"  width="">
                          </el-table-column>
                          <el-table-column prop="keyword" label="关键字"  width="80">
                          </el-table-column>
                          <el-table-column prop="video_num" label="浏览数"   width="80">
                          </el-table-column>
                          <el-table-column prop="forward_num" label="分享数"  width="80">
                          </el-table-column>
                          <el-table-column prop="comment_num" label="评论数"  width="80">
                          </el-table-column>
                          <el-table-column prop="" label="收益金额"  width="80">
                            <template #default="scope" style="display: flex;justify-content: center;">
                                  <span style="color: #FF7F00;">{{scope.row.money}}</span>
                            </template>
                          </el-table-column>
                          <el-table-column prop="" :label="state.typeArr[state.activeIndex].title+'详情'"  width="80">
                            <template #default="scope">
                              <div style="display: flex;justify-content: center;" >
                                <div style="width: 50px;height: 24px;background: #E2E9FF;border-radius: 2px;cursor: pointer;" @click="goDetail(scope)">
                                  详情
                                </div>
                              </div>

                            </template>
                          </el-table-column>

                      </el-table>
                </div>
                <div class="contentItem" v-if="state.activeIndex==1">
                      <div class="videoArr">
                          <div class="videoBox" v-for="(item,index) in state.tableArr" @click="goDetail(item)" :key="index">
                             <div class="videoItem">
                                <div class="cover">
                                    <img :src="item.imgs" >
                                    <div class="tag" >
                                       {{item.classfly}}
                                    </div>
                                </div>
                                <div class="titleText">
                                  {{item.title}}
                                </div>
                                <div class="count">
                                    <span>{{item.video_num}}人浏览</span>
                                    <span>{{item.forward_num}}人分享</span>
                                </div>
                                <div class="bottomInfo">
                                    <span>{{item.ctime}}</span>
                                    <span>收益：{{item.money}}</span>
                                </div>
                             </div>
                          </div>

                          <div class="tips" v-if="!state.tableArr.length">
                             暂无数据
                          </div>
                      </div>
                </div>
                <div class="contentItem" v-if="state.activeIndex==2">
                      <el-table :data="state.tableArr"  align="center" :header-cell-style="{background: '#F0F0F0',color: '#5C5F66',}"   height="420">
                                <el-table-column prop="title" :label="state.typeArr[state.activeIndex].title+'标题'"  width="">
                                </el-table-column>
                                <el-table-column prop="ctime" sortable label="发布时间"  width="">
                                </el-table-column>
                                <el-table-column prop="keyword" label="关键字"  width="">
                                </el-table-column>
                                <el-table-column prop="video_num" label="浏览数"   width="">
                                </el-table-column>
                                <el-table-column prop="forward_num" label="分享数"  width="">
                                </el-table-column>
                                <el-table-column prop="comment_num" label="评论数"  width="">
                                </el-table-column>
                                <el-table-column prop="" label="收益金额"  width="">
                                  <template #default="scope" style="display: flex;justify-content: center;">
                                        <span style="color: #FF7F00;">{{scope.row.money}}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column prop="" :label="state.typeArr[state.activeIndex].title+'详情'"  width="">
                                  <template #default="scope">
                                    <div style="display: flex;justify-content: center;" >
                                      <div style="width: 50px;height: 24px;background: #E2E9FF;border-radius: 2px;cursor: pointer;" @click="goDetail(scope)">
                                        详情
                                      </div>
                                    </div>

                                  </template>
                                </el-table-column>

                      </el-table>
                </div>
                <div style="display:grid;width:100%;place-items:center;margin-bottom:10px;" v-if="state.tableArr.length">
                      <el-pagination
                        @current-change="handleCurrentChange"
                        layout="total, prev, pager, next"
                        :total="state.tableLength"
                      >
                      </el-pagination>
                  </div>

            </div>
        </div>
    </div>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive,inject } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import menuBar from './component/menuBar'
import headPortrait from './component/headPortrait'
const state = reactive({
    typeArr:[
      {title:'文章',num:0},
      {title:'视频',num:0},
      {title:'简讯',num:0},
    ],
    tableType:[
      {label:'已发布',val:'1'},
      {label:'审核中',val:'2'},
      {label:'被驳回',val:'3'},
    ],
    activeTableType:0,
    activeIndex:0,
    tableArr:[],
    tableLength:0,
    currentPage:1,
  });
export default {
  name: 'myProduction',
  components: {
    menuBar,
    headPortrait,
  },
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      const echarts = inject("ec");//引入
      function changeType(_index){
        state.activeIndex = _index
        getArr()
      };
			function changeTableType(_index) {
				state.activeTableType = _index
        getArr()
			};
      function getCount(){
        _this.$request({
          url:'/api/pcWriter/information_count',
        }).then(res=>{
          if (res.code===1) {
            state.typeArr[0].num = res.data.article
            state.typeArr[1].num = res.data.video
            state.typeArr[2].num = res.data.newsletter
          }
        })
      }
      function getArr(){
          _this.$request({
          url:'/api/pcWriter/information_list',
          data:{
            status: state.activeTableType+1,
            page: state.currentPage,
            pagesize:'10',
            type:state.activeIndex+1,
          }
        }).then(res=>{
          // state.tableArr = []
          if(res.code==1){
            state.tableArr = res.data.data
            state.tableLength = res.data.total
          }else{

          }
        })
      }
      function goDetail(_item){
        console.log(_item);
        let inf_id =_item.inf_id ? _item.inf_id :  _item.row.inf_id
        router.push(
        {
          name:'productionDetail',
          query:{
            inf_id,
            type:state.activeIndex+1,
          },
        })
      }
      function handleSizeChange(_size){
        // console.log(_size);
        console.log(111);
      }
      function handleCurrentChange(_size){
        // console.log(_size);
        state.currentPage = _size
        getArr()
        console.log(123);
      }
      function initEchart(){
        //需要获取到element,所以是onMounted的Hook
            let myChart = echarts.init(document.getElementById("customerChart"));
              // 绘制图表
              myChart.setOption({
                tooltip: {
                  trigger: 'item'
                },
                // 图例
                // legend: {
                //    top: '8%',
                //    left: 'center'
                // },
                   //环形中间文字
                graphic: [
                     //第一行文字
                     //内容 + 位置
                     {
                         type: 'text',
                         left: '26%',
                         top: '30%',
                         style: {
                             //value当前进度
                             text: "588",
                             textAlign: 'center',
                             fill: '#4977FC',
                             fontSize: 36,
                             // fontWeight: 'bold'
                         }
                     },
                     //第二行文字
                     {
                         type: 'text',
                         left: '33%',
                         top: '58%',
                         style: {
                             //maxValue进度条最大值
                             text: '总收益',
                             textAlign: 'center',
                             fill: '#7F7F7F',
                             fontSize: 16
                         }
                     }
                 ],
                series: [
                  {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['78%', '90%'],
                    avoidLabelOverlap: false,
                    color:['#4977FC','#FE7D2F',],
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        // label: {
                        //     show: true,
                        //     fontSize: '20',
                        //     fontWeight: 'bold'
                        // }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 500, name: '可提现'},
                        {value: 88, name: '已提现'},
                    ]
                  }
                ],
              });
              window.onresize = function () {//自适应大小
                myChart.resize();
              };
      }
      onMounted(()=>{
        getCount()
        getArr()
        initEchart()
      });
      return{
        state,changeType,changeTableType,getCount,
        goDetail,handleSizeChange,handleCurrentChange
      }
  },
  data () {
    return {
    }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  },
}
</script>
<style lang="scss" scoped>
    @media screen and (max-width: 1000px) {
       .home{
         .myProduction{
           width: 100% !important;
         }
       }

    }
    /deep/ .el-table__header{
      background: #F0F0F0;
    }
    /deep/ .el-table .cell {
      text-align: center;
    }


    .home{
      display: flex;
      height: 100vh;
      width: 100%;
      .myProduction{
        width: calc( 100% - 255px);
        position: relative;
        box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;

        .inform{
          position: absolute;
          top: 11%;
          left: 2.5%;
          background-color: #fff;
          height: 56px;
          width: 95%;
          border-radius: 10px;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: 0 10% 0 2%;
          .text{
            flex: 1;
            padding-left: 30px;
            border-left: 2px solid #E0E0E0;
          }
          span{
            color: #2E3C6D;
          }
          .title{
            margin: 0 15px;
          }
          .more{
            margin-left: 10px;
          }
         img{
           width: 20px;
           height: 21px;
         }
          // box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
        }
        .page{
          position: absolute;
          top: 10%;
          left: 2.5%;

          height: 77%;
          width: 94.5%;
          border-radius: 10px;
          .typeArr{
            height: 40px;
            color: #fff;
            font-size: 22px;
            font-weight: 400;
            background: transparent;
            display: flex;
            align-items: flex-end;
            width: 100%;
            position: relative;
            &:after{
              content: '';
              height: 1px;
              width: 103.2%;
              position: absolute;
              opacity: 0.5;
              top: 0;
              left: 0;
              background-color: #ffff;
            }
            .typeItem{
              width: 13%;
              display: flex;
              justify-content: center;
              cursor: pointer;
            }

            .active{
              position: relative;
              &::before{
                content: '';
                position: absolute;
                bottom: -60%;
                width: 0;
                height: 0;
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
                border-bottom: 15px solid #fff;
              }
            }
          }
          .content{
            margin-top: 15px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 105%;
            border-radius: 8px;
             .title{
               color: #386AFC;
               font-size: 18px;
               margin-top: 25px;
               margin-left: 5%;
               position: relative;
               &:before{
                 content: '';
                 position: absolute;
                 top: 15%;
                 left: -1%;
                 background-color: #4977FC;
                 width: 2px;
                 height: 14px;
               }
             }
             .descData{
                display: flex;
                // align-items: center;
                .count{
                  margin-top: 40px;
                  padding-left: 4%;
                  .text{
                    font-size: 14px;
                    color: #666666;
                    margin-bottom: 5px;
                    width: 60px;
                  }
                  span{
                    color: #4977FC;
                    font-size: 36px;
                  }
                }
                .icon{
                  // flex: 1;
                  margin: 55px 9vw 0 9vw;
                  img{
                    width: 81px;
                    height: 40px;
                    // width: 100%;
                  }
                }
                .echart{
                  display: grid;
                  place-items: center;
                }
                .legend{
                  margin-top: 10px;
                  margin-left: 5%;
                  display: flex;
                  flex-direction: column;
                  padding: 5px 0;
                  .item{
                    flex: 1;
                    .label{
                      color: #666666;
                      font-size: 14px;
                      position: relative;
                      &::after{
                        content: '';
                        position: absolute;
                        top: 10%;
                        left: -35%;
                        width: 10px;
                        height: 10px;
                        background-color: #4977FC;
                      }
                    }
                    &:nth-child(1) .label::after{
                      background-color: #FE7D2F;
                    }
                    &:nth-child(1) .value{
                      color: #FE7D2F;
                    }
                    .value{
                      font-size: 20px;
                      color: #4977FC;
                    }
                  }
                }
             }
						.tableType {
              margin-top: 20px;
							width: 100%;
							height: 30px;
							font-size: 18px;
							font-weight: 400;
							color: #1C1A1D;
							background-color: transparent;
							display: flex;
							align-items: flex-end;
							.tableTitle {
								width: 10%;
                min-width: 100px;
								display: flex;
								justify-content: center;
								cursor: pointer;
							}
							.active {
								position: relative;
								&::before {
									position: absolute;
									bottom: -6px;
									content: '';
									width: 30px;
									height: 3px;
									background-color: #4977FC;
								}
							}
						}

            .contentItem {
              margin: 20px 30px;
              // overflow: auto;
              overflow-y: auto;
              // width: 90%;
              height: 70%;

              .videoArr{
                height: 100%;
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                .videoBox{
                    flex: 0 0 25%;
                    margin-bottom: 10px;
                    margin-top: 5px;
                    height: 339px;
                    display: flex;
                    justify-content: center;
                    .videoItem{
                      box-shadow: 0px 1px 10px 0px rgba(30, 33, 37, 0.2);
                      border-radius: 4px;
                      height: 339px;
                      width: 262px;
                      margin-right: 20px;
                      box-sizing: border-box;
                      cursor: pointer;
                      .cover{
                        position: relative;
                        img{
                          width: 100%;
                          height: 178px;
                        }
                        .tag{
                          position: absolute;
                          top: 5%;
                          left: -4%;
                          width: 78px;
                          height: 28px;
                          background: #FD5782;
                          color: #fff;
                          box-shadow: 0px 1px 2px 0px #FD5782;
                          border-radius: 2px 2px 2px 0px;
                          display: grid;
                          place-items: center;
                          &::before{
                            content:'';
                            position: absolute;
                            bottom: -40%;
                            left: -26%;
                            width: 0;
                            height: 0;
                            border-right: 12px solid #CB496B;
                            border-left: 20px solid transparent;
                            border-bottom: 12px solid transparent;
                          }
                        }
                      }
                      .titleText{
                        padding: 14px;
                        color: #1C1A1D;
                        color: #1C1A1D;
                        font-weight: 600;
                        font-size: 18px;
                      }
                      .count{
                        padding: 14px;
                        color: #8A8E99;
                        span{
                          color: #8A8E99;
                          margin-right: 14px;
                          &:nth-child(2) {
                            height: 16px;
                            padding-left: 14px;
                            border-left: 3px solid #8A8E99 ;
                          }
                        }
                      }
                      .bottomInfo{
                        margin: 14px 0px;
                        padding: 0 14px;
                        border-top: 1px solid #F0F0F0;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        span{
                          color: #8A8E99;
                          &:nth-child(2) {
                            color: #FF7F00;
                          }
                        }
                      }
                    }
                }
                .tips{
                  color: #909399;
                  display: grid;
                  width: 100%;
                  height: 100%;
                  place-items: center;
                  box-shadow: 0px 1px 10px 0px rgba(30, 33, 37, 0.2);
                }

              }

            }
          }
        }
      }
    }
</style>
